
<!-- amap相关的 -->
<script
	src="http://webapi.amap.com/maps?v=1.4.2&key=5af77f15709d68faab1923dd93835c9c"></script>
<script type="text/javascript"
	src="${request.contextPath}/assets/dist/js/myJs/mapConfigAmap.js"></script>
<div style="width: 100%;">
	<input type="hidden" id="id" /> <input type="hidden" id="pId" /> <input
		type="hidden" id="levelFlag" />
	<div class="row" style="height: 660px;" id="trackPlayContent">
		<div class="col-md-3  col-xs-3" id="left_content">
			<div class="nav-tabs-custom">
				<div id="car_info_title">
					<span>车辆信息</span> <span onclick="gohide()" class="pull-right">
						<a href="#" class="text-muted"> <i data-toggle="tooltip"
							data-original-title="隐藏" class="fa fa-chevron-left"></i>
					</a>
					</span>
				</div>
				<div class="circle">
					<i class="fa fa-circle m-r-5 c-green"></i><i
						class="fa fa-circle m-r-5 c-yellow"></i><i
						class="fa fa-circle m-r-5 c-grey"></i><span>666</span><i
						class="fa fa-circle c-red m-r-5" style="margin-left: 40px;"></i><span>666</span>
				</div>
				<div class="tab-content no-padding">
					<div class="tab-pane active">
						<div class="box-body">
							<div class="form-group">
								<select class="form-control"
									style="width: 80px; display: inline-block;">
									<option>全部</option>
									<option>正常</option>
									<option>异常/警报</option>
								</select>
								<div class="search-car-content">
									<input class="form-control" type="text"
										placeholder="车牌号、SIM卡号、终端编号查询" id="name" maxLength="50" /> <i
										class="fa fa-search" id="search-car" onclick="searchNavFun()"></i>
								</div>
							</div>
							<div class="form-group" style="height: 520px; overflow: auto;">
								<div class="col-md-12 no-padding">
									<ul class="ztree" id="zTree"></ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-9 col-xs-9" id="right_content">
			<div class="col-md-12 col-xs-12 no-padding">
				<div id="gjhfMapDiv" style="padding-top: 5px;">
					<div id="amap" class="amap-container"></div>
					<div data-toggle="tooltip" title="显示" id="goshow"
						onclick="goshow()">
						<i class="fa fa-chevron-right"></i>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row" id="lineRow">
		<div class="nav-tabs-custom">
			<ul class="nav nav-tabs">
				<li style="border-top: 3px solid #3c8dbc;"><a href="#"
					data-toggle="tab" aria-expanded="true">轨迹列表</a></li>
				<li class="pull-left" id="search_car_name"></li>
				<li class="pull-left"><label>开始：</label> <input type="text"
					id="startTime" /> <label>结束：</label> <input type="text"
					id="endTime" />
					<button type="button" class="btn btn-primary bts-sm btn-flat"
						id="searchBtn">查询</button>
				<li class="pull-left playCarListIcon" style="display: none">
					<button type="button" class="btn btn-primary bts-sm btn-flat"
						id="car_start" onclick="carStart()">播放</button>
				</li>
				<li class="pull-left playCarListIcon" style="display: none">
					<button type="button" class="btn btn-primary bts-sm btn-flat"
						id="car_pause" onclick="carPause()">暂停</button>
				</li>
				<li class="pull-left playCarListIcon" style="display: none">
					<div style="width: 279px; text-align: center; margin: 0 auto;">
						<span style="float: left">慢&nbsp;</span>
						<div style="margin-top: 7px; float: left;">
							<input type="range" class="rangeLan" min="10" max="6000"
								value="2000" style="width: 200px; padding: 0;" id="lanRange" />
						</div>
						<span style="float: left;">&nbsp;快</span>
					</div>
				</li>
				<li class="pull-left playCarListIcon" style="display: none">
					<button type="button" class="btn btn-primary bts-sm btn-flat"
						id="car_start_again" onclick="carStartAgain()">回看</button>
				</li>
				<li class="pull-left playCarListIcon" style="display: none">
					<button type="button" class="btn btn-primary bts-sm btn-flat">导出</button>
				</li>

				<li class="pull-right" onclick="hideLine(this)"><a href="#"
					class="text-muted"> <i class="fa fa-chevron-down"
						data-toggle="tooltip" title="隐藏"></i>
				</a></li>
			</ul>
			<div class="tab-content no-padding" id="line_content">
				<div class="tab-pane active">
					<div class="box-body no-padding">
						<div>
							<table style="margin-left: 5px;">
								<thead>
									<tr>
										<th style="width: 40px;">序号</th>
										<th style="width: 150px;">时间</th>
										<th style="width: 80px;">速度(km/h)</th>
										<th style="width: 80px;">方向</th>
										<th style="width: 100px;">里程(km)</th>
										<th style="width: 100px;">经度</th>
										<th style="width: 100px;">纬度</th>
										<th style="width: 280px;">位置</th>
										<th>车辆状态</th>
									</tr>
								</thead>
							</table>
						</div>
						<div id="gjhfListDiv">
							<table id="gjhfList">
								<tbody id="getHistoryCarInfo">
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/x-jsrender" id="history_car_info_table">
    <tr>
        <td>{{:#index+1}}</td>
        <td>{{:gpstime_str}}</td>
        <td>{{:speed}}</td>
        {{if direction == 0 || direction == 360}}
        <td>正北</td>
		{{else direction > 0 && direction < 90}}
 		<td>东北</td>
		{{else direction==90}}
 		<td>正东</td>
		{{else direction > 90 && direction < 180}}
 		<td>东南</td>
		{{else direction ==180}}
 		<td>正南</td>
		{{else direction > 180 && direction < 270}}
 		<td>西南</td>
		{{else direction ==270}}
 		<td>正西</td>
		{{else direction > 270 && direction < 360}}
 		<td>西北</td>
		{{/if}}
        <td>{{:mileage}}</td>
        <td>{{:lng}}</td>
        <td>{{:lat}}</td>
        <td>{{:location}}</td>
        <td>{{:status}}</td>
    </tr>
</script>
<script type="text/javascript">
	$(function() {
		onLoadCompanyTree();
		$("#startTime").datetimepicker({
			defaultDate : new Date(),
			format : "YYYY-MM-DD 00:00:00"
		}).on('dp.change', function(e) {
			if (!e.oldDate || e.oldDate == e.date)
				return;
			$("#endTime").data("DateTimePicker").minDate(e.date);
		});
		$("#endTime").datetimepicker({
			defaultDate : new Date(),
			format : "YYYY-MM-DD HH:mm:ss"
		}).on('dp.change', function(e) {
			if (!e.oldDate || e.oldDate == e.date)
				return;
			$("#startTime").data("DateTimePicker").maxDate(e.date);
		});
		$("#searchBtn").bind("click", function() {
			console.log("------start---------->>>>>开始执行查询...");
			var startTime = $.trim($("#startTime").val());
			var endTime = $.trim($("#endTime").val());
			if (startTime == "") {
				swal("开始时间不能为空！");
				return false;
			}
			if (endTime == "") {
				swal("结束时间不能为空！");
				return false;
			}
			if (startTime > endTime) {
				swal("开始时间应该小于结束时间！");
				return false;
			}
			if ($("#name").val().trim() == "") {
				swal("请选择车牌号码！");
				return false;
			}
			var id = $.trim($("#id").val());
			if (id == "" || id == "null") {
				swal("没有找到轨迹数据！");
				return false;
			}
			//查询轨迹数据
			getTrackPlayData(id, startTime, endTime);
			if (window.deviceData != "") {
				lineArr = [];
				isStart = false;
				isPause = false;
				changeFlag = false;
				playIndex = 0;
				carChange = [];
				if (passedPolyline) {
					passedPolyline.setPath(null);
				}
				$("#search_car_name").text($("#name").val());
				$(".playCarListIcon").css("display", "block");
				gjhTableFunction.initData();
				gjhTableFunction.loadPath();
			} else {
				swal("没有找到轨迹数据！");
				return false;
			}
		});
	});
	function onLoadCompanyTree() {
		$.ajax({
			url : "${request.contextPath}/user/getTreeOrgTeamVehicle",
			type : "post",
			async : false,
			success : function(data) {
				if (data.success && data.other) {
					var setting = {
						view : {
							selectedMulti : false,
							nameIsHTML : true,
							dblClickExpand : false
						},
						data : {
							simpleData : {
								enable : true
							}
						},
						check : {
							enable : true,
							chkStyle : "radio"
						},
						expandSpeed : "",
						callback : {
							onClick : onClick,
							onCheck : onCheck,
							onNodeCreated : setTitleTs
						}
					};
				   var treeData = formatTreeImage(data.other);
				   console.log(treeData);
			       $.fn.zTree.init($("#zTree"), setting, treeData);
			       $.fn.zTree.getZTreeObj("zTree").expandAll(true);//展开
				}
			}
		});
	}
	function onClick(e, treeId, treeNode, chlikFag) {
		gjhfTreeObj.checkNode(treeNode, !treeNode.checked, true);
		if (treeNode.levelFlag == "3") {
			$("#id").val(treeNode.id);
			$("#name").val(treeNode.name);
			$("#pId").val(treeNode.pId);
			$("#levelFlag").val(treeNode.levelFlag);
		}

	}
	function onCheck(e, treeId, treeNode, chlikFag) {
		var treeObj = $.fn.zTree.getZTreeObj("zTree");
		treeObj.checkAllNodes(false);
		if (treeNode.levelFlag == "3") {
			$("#id").val(treeNode.id);
			$("#name").val(treeNode.name);
			$("#pId").val(treeNode.pId);
			$("#levelFlag").val(treeNode.levelFlag);
		}
	}
	function setTitleTs(event, treeId, treeNode) {
		var atitle = $("#" + treeNode.tId + "_a");
		if (treeNode.levelFlag == 3) {
			atitle[0].title = treeNode.name + "\n终端ID:" + treeNode.name
					+ "\n所属组织:" + treeNode.name + "\n状态:" + treeNode.name
					+ "\n位置:" + treeNode.name + "\n速度:" + treeNode.name;
		}
	}
	function getTrackPlayData(id, startTime, endTime) {
		$.ajax({
			url : "${request.contextPath}/monitor/trackReplayData",
			type : "post",
			async : false,
			data : {
				deviceId : id,
				startTime : startTime,
				endTime : endTime
			},
			success : function(data) {
				if (data) {
					data = eval(data);
					if (data.success && data.msg) {
						window.deviceData = data.msg;
						console.log(window.deviceData);
					}
				}
			},
			error : function() {
			}
		});
	}
	var gjhfTreeObj;
	var marker, lineArr = [];
	var map;
	var passedPolyline;
	//判断是否点击播放
	var isStart = false;
	//判断是否点击暂停
	var isPause = false;
	var playIndex = 0;
	var carChange = [];
	//判断是否播放中第一次改变速度
	var changeFlag = false;
	var gjhTableFunction = {
		initData : function() {
			var data = $("#history_car_info_table").render(deviceData);
			$("#getHistoryCarInfo").empty().append(data);
		},

		loadPath : function() {
			map.clearMap();
			marker = new AMap.Marker({
				map : map,
				position : [ deviceData[0].lng, deviceData[0].lat ],
				icon : "http://webapi.amap.com/images/car.png",
				offset : new AMap.Pixel(-26, -13),
				autoRotation : true
			});
			lineArr.push[deviceData[0].lng, deviceData[0].lat];
			$.each(deviceData, function(index, item) {
				lineArr.push([ item.lng, item.lat ]);
			});
			var startXy = lineArr[0];
			var endXy = lineArr[lineArr.length - 1];
			//起点、终点图标
			var sicon = new AMap.Icon({
				image : "http://cache.amap.com/lbs/static/jsdemo002.png",
				size : new AMap.Size(44, 44),
				imageOffset : new AMap.Pixel(-334, -180)
			});
			var startmarker = new AMap.Marker({
				icon : sicon, //复杂图标
				visible : true,
				position : startXy,
				map : map,
				offset : {
					x : -16,
					y : -40
				}
			});

			var eicon = new AMap.Icon({
				image : "http://cache.amap.com/lbs/static/jsdemo002.png",
				size : new AMap.Size(44, 44),
				imageOffset : new AMap.Pixel(-334, -134)
			});

			var endmarker = new AMap.Marker({
				icon : eicon, //复杂图标
				visible : true,
				position : endXy,
				map : map,
				offset : {
					x : -16,
					y : -40
				}
			});

			// 绘制轨迹
			var polyline = new AMap.Polyline({
				map : map,
				path : lineArr,
				strokeColor : "#00A", //线颜色
				// strokeOpacity: 1,     //线透明度
				strokeWeight : 3, //线宽
			// strokeStyle: "solid"  //线样式
			});
			passedPolyline = new AMap.Polyline({
				map : map,
				// path: lineArr,
				strokeColor : "#F00", //线颜色
				// strokeOpacity: 1,     //线透明度
				strokeWeight : 3, //线宽
			// strokeStyle: "solid"  //线样式
			});
			var position = marker.getPosition();
			var changeLineArr = [];
			marker.on('moving', function(e) {
				playIndex = e.passedPath.length - 1;
				if (!changeFlag) {
					passedPolyline.setPath(e.passedPath);
				} else {
					position = marker.getPosition();
					changeLineArr = lineArr.slice(0, lineArr.length
							- carChange.length + playIndex);
					changeLineArr.push(position);
					passedPolyline.setPath(changeLineArr);
				}
			});
			marker
					.on(
							'moveend',
							function() {
								if (!changeFlag) {
									$("#getHistoryCarInfo tr").eq(playIndex)
											.addClass("lighttr").siblings()
											.removeClass("lighttr");
									$("#gjhfListDiv")
											.scrollTop(
													$("#getHistoryCarInfo tr")
															.eq(playIndex)[0].offsetTop - 60);
								} else {
									$("#getHistoryCarInfo tr").eq(
											lineArr.length - carChange.length
													+ playIndex).addClass(
											"lighttr").siblings().removeClass(
											"lighttr");
									$("#gjhfListDiv")
											.scrollTop(
													$("#getHistoryCarInfo tr")
															.eq(
																	lineArr.length
																			- carChange.length
																			+ playIndex)[0].offsetTop - 60);
								}
							});
			map.setFitView();
		}
	};
	function carStart() {
		if (isPause && isStart || isStart) {
			marker.resumeMove();
		} else {
			marker.moveAlong(lineArr, $("#lanRange").val());
		}
		isPause = false;
		isStart = true;
	};
	function carPause() {
		marker.pauseMove();
		isPause = true;
	};
	function carStartAgain() {
		marker.moveAlong(lineArr, 0);
		marker.stopMove();
		passedPolyline.setPath(null);
		isStart = false;
		isPause = false;
		changeFlag = false;
	};

	function gohide() {
		$("#left_content").hide();
		$("#right_content").attr("class", "col-md-12 col-xs-12 content-right");
		$("#right_content").css({
			"width" : "100%",
			"margin-left" : "14px"
		});
		$("#goshow").show();
	}
	function goshow() {
		$("#left_content").show();
		$("#right_content").attr("class", "col-md-9 col-xs-9 content-right");
		$("#right_content").css({
			"width" : "75%",
			"margin-left" : "0px"
		});
		$("#left_content").css({
			"width" : "25%"
		});
		$("#goshow").hide();
	}

	function hideLine(obj) {
		if ($(obj).find("i").hasClass("fa-chevron-down")) {
			$("#line_content").hide();
			$(obj).find("i").attr("class", "fa  fa-chevron-up");
			$(obj).find("i").attr("data-original-title", "显示");
			$("#lineRow").css("height", "40px");
			$("#trackPlayContent").css("height", "810px");
			$("#amap").css("height", "804px");

		} else {
			$("#line_content").show();
			$(obj).find("i").attr("class", "fa  fa-chevron-down");
			$(obj).find("i").attr("data-original-title", "隐藏");
			$("#lineRow").css("height", "200px");
			$("#amap").css("height", "654px");
			$("#trackPlayContent").css("height", "660px");
		}
	}

	function searchNavFun() {
		var searchVal = $("#name").val().trim();
		var treeObj = $.fn.zTree.getZTreeObj("zTree");
		var SearchNodes = treeObj.getNodesByParamFuzzy("name", searchVal, null);
		if (!SearchNodes || SearchNodes.length <= 0) {
			swal("暂无数据！");
			return false;
		}
		;
		var NoSearchNodes = treeObj.getNodesByFilter(filterNodes); // 查找没有该参数的节点集合;
		$.each(NoSearchNodes, function(idx, item) {
			treeObj.hideNode(item);
		});
		$.each(SearchNodes, function(idx, item) {
			var itemParents = item.getPath();
			$.each(itemParents, function(chidx, chitem) {
				treeObj.showNode(chitem);
				if (chitem.isParent) {
					treeObj.expandNode(chitem, true, false);
				}
			});
		});
	}

	function filterNodes(node, searchVal) {
		return (node.name.indexOf(searchVal) <= -1);
	}

	$("#lanRange").change(function() {
		if (isStart && !isPause || isPause) {
			var position = marker.getPosition();
			if (!changeFlag) {
				carChange = lineArr.slice(playIndex);
				carChange.unshift(position)
				marker.moveAlong(carChange, $(this).val());
				changeFlag = true;
			} else {
				carChange = carChange.slice(playIndex);
				carChange.unshift(position);
				marker.moveAlong(carChange, $(this).val());
			}
		}
	});
</script>